<!-- eslint-disable prettier/prettier -->
<template>
	<div class="login">
		<v-card class="form">
			<div class="label">
				<div class="title">
					校园卡
				</div>
			</div>
			<div class="mt-4">
				<div class="mb-2" style="font-weight: 700">姓名：</div>
				<v-text-field model-value="" type="password" variant="outlined" density="compact" clearable
					placeholder="请输入姓名" hide-details></v-text-field>
			</div>
			<div class="my-4">
				<div class="mb-2 mt-4" style="font-weight: 700">身份证：</div>
				<v-text-field model-value="" type="password" variant="outlined" density="compact" placeholder="请输入身份证号码"
					clearable hide-details></v-text-field>
			</div>
			<div class="my-4">
				<div class="mb-2 mt-4" style="font-weight: 700">收货地址：</div>
				<v-text-field model-value="" type="password" variant="outlined" density="compact" placeholder="请输入收货地址"
					clearable hide-details></v-text-field>
			</div>
			<div class="my-4">
				<div class="mb-2 mt-4" style="font-weight: 700">联系电话：</div>
				<v-text-field model-value="" type="password" variant="outlined" density="compact" placeholder="请输入联系电话"
					clearable hide-details></v-text-field>
			</div>
			<div class="my-4">
				<div class="mb-2 mt-4" style="font-weight: 700">手机型号：</div>
				<v-text-field model-value="" type="password" variant="outlined" density="compact" placeholder="请输入手机型号"
					clearable hide-details></v-text-field>
			</div>
			<div class="my-6">
				<v-btn color="primary" variant="flat" block size="large" type="submit">
					提交
				</v-btn>
			</div>
		</v-card>
	</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
reactive({
	email: '',
	password: ''
})
</script>
<style lang="scss" scoped>
.login {
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	.form {
		border-radius: 8px;
		box-shadow: none;
		width: 520px;
		margin: 0 auto;
		padding: 40px;
		padding-bottom: 16px;

		.label {
			text-align: center;

			.title {
				font-size: 32px;
				font-weight: bold;
			}
		}

		.d-flex {
			.text-center {
				flex: 0 0 60px;
			}
		}
	}
}

@media only screen and (max-width: 778px) {}
</style>
